<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <link href="util/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript" src="util/My97DatePicker/WdatePicker.js"></script>
    <script src="util/rem.js"></script>
    <title>车龙惠注册页面</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        /* overflow: hidden; */
    }

    .box1 {
        width: 100%;
        height: 30%;
        position: fixed;
        left: 0%;
        bottom: 0%;
        /* margin-left: -250px; */
        background-color: #fff;
        border-top: 1px solid #ffb8ff;
        display: none;
    }

    body {
        height: 100%;
        width: 100%;
    }

    html {
        height: 100%;
        width: 100%;
    }

    select {
        /* border: none; */
        height: .3rem;
        line-height: .3rem;
        border-color: #dfdfdf;
        border-radius: .0875rem;
        padding: 0 .05rem;
        color: #4e4e4e;
    }

    :focus {
        outline: none;
    }


    select option {
        border: none;
    }

    select:focus {
        border-color: #f88686;
    }

    .content {
        margin: auto;
        width: 100%;
        height: 100%;
        position: relative;
        /* background-color: royalblue; */
        background: url(./img/register.png) no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        padding-top: 0.25rem;
    }

    .top {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -10;
        width: 100%;
    }

    .top>img {
        width: 100%;
        height: 100%;
    }

    .imgs {
        width: 1rem;
        height: 1rem;
        margin: auto;
        margin-bottom: 0.25rem;
        text-align: center;
        font-weight: bold;

    }

    .imgs img {
        width: 98%;
        height: 98%;
        margin-bottom: .08rem;
    }

    .imgs>span {
        padding-top: 0.5rem;
        font-size: .2rem;
        color: #e44582;
    }

    .dibu {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -10;
        width: 100%;
        height: 1rem;
    }

    .dibu>img {
        width: 100%;
        height: 100%;
    }

    .phone,
    .yzmcs,
    .tjphone,
    .szd,
    .mima {
        display: flex;
        width: 80%;
        margin: auto;
        height: 0.3rem;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 0.01rem solid #f2f2f2;
        padding-bottom: 0.05rem;
    }

    .szd {
        font-size: 0.14rem;
    }

    .szd>span>img {
        width: 0.25rem;
        height: 0.25rem;
    }

    .tjphone {
        font-size: 0.14rem;
        position: absolute;

    }

    .tj-phone-name img {
        width: 0.25rem;
        height: 0.25rem;
    }

    .phone-name {
        line-height: 1;
        font-size: 0.14rem;
        margin-right: 0.01rem;
        width: 0.6rem;
        /* padding: 0.2rem 0.1rem; */
    }

    .phone-name img {
        width: 0.25rem;
        height: 0.25rem;
    }

    .ipt,
    .ipt2 {
        flex: 1;
        width: 100%;
        /* background: red; */
    }

    input {
        border: none;
        outline: none;
        width: 100%;
        height: 0.3rem;
        font-size: 0.14rem;
        /* text-indent: 1em; */
        color: none;
        background-color: transparent;
    }

    input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #aab2bd;
        /* placeholder字体大小  */
        font-size: 0.14rem;
        /* placeholder位置  */
        /* text-indent: 1em; */
    }

    #test_form>div {
        margin-bottom: 0.15rem;
    }

    .tj-phone-name {
        width: 0.6rem;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-transition-delay: 111111s;
        -webkit-transition: color 11111s ease-out,
            background-color 111111s ease-out;
    }

    .ipt2 {
        display: flex;
    }

    .yzm {
        width: 1.5rem;
        height: 0.3rem;
        /* background-color: red; */
        text-align: center;
        line-height: 0.3rem;
        background-color: transparent;
        border: 0;
        overflow: visible;
        padding: 0;
    }

    .xieyi {
        font-size: 0.14rem;
        height: 0.35rem;
        width: 90%;
        margin: 0.4rem auto 0.2rem;
        text-align: center;
        line-height: 0.35rem;
    }

    .xieyi>a {
        text-decoration: none;
        color: red;
    }

    /* #xiazai {
        width: 90%;
        background-color: #6dce5a;
        border-radius: 0.2rem;
        height: 0.35rem;
        margin: auto;
        text-align: center;
        font-size: 0.18rem;
        line-height: 0.35rem;
        text-decoration: none;
      } */
    .zhuces {
        width: 90%;
        height: 0.4rem;
        position: relative;
        margin: auto;
        margin-top: 0.8rem;
    }

    .zhuces>.zhuce {
        position: absolute;
        height: 0.2rem;
        width: 0.4rem;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        color: #fff;
        font-size: 0.16rem;
    }

    .zhuces img {
        width: 100%;
        height: 100%;
    }

    .xiazais {
        width: 90%;
        height: 0.4rem;
        position: relative;
        margin: auto;
        display: none;
    }

    .xiazais>.xiazai {
        position: absolute;
        height: 0.2rem;
        width: 0.4rem;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        color: #fff;
        font-size: 0.16rem;
    }

    .xiazais img {
        width: 100%;
        height: 100%;
    }

    a:link {
        text-decoration: none;
    }

    .axs {
        color: inherit;
        text-decoration: none;
        display: block;
        border: none;
    }

    .wxtip {
        background: rgba(0, 0, 0, 0.8);
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        display: none;
    }

    /* .wxtip-icon {
      width: 52px;
      height: 67px;
      background: url(util/image/weixin.png) no-repeat;
      display: block;
      position: absolute;
      right: 20px;
      top: 20px;
    } */

    .wxtip-txt {
        margin-top: 1.07rem;
        color: #fff;
        font-size: 0.16rem;
        line-height: 1.5;
    }

    .contents {
        margin-top: 2.2rem;
    }

    .sex>input {
        width: .20rem;
        height: .20rem;
        line-height: .20rem;
        margin-left: .05rem;
    }

    .sex>span {
        margin-left: .05rem;
    }
</style>

<body>
    <div class="content">
        <!-- <div class="dibu">
        <img src="util/image/dibu.png" alt="">
    </div>
    <div class="top">
        <img src="util/image/dingbu.png" alt="">
    </div>
    <div class="imgs">
        <img src="util/image/xiangsiyu.png" alt=""/>
        <span style="padding-top: .5rem;">车龙惠</span>
    </div> -->
        <div class="contents">
            <form action="" method="" id="test_form">
                <div class="phone">
                    <!-- <div class="tj-phone-name"><img src="util/image/shoujihao.png" alt=""></div> -->
                    <div class="ipt">
                        <input type="text" id="phone" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"
                            placeholder="请输入手机号" />
                    </div>
                </div>
                <div class="yzmcs">
                    <!-- <div class="phone-name"><img src="util/image/yanzhengma.png" alt=""></div> -->
                    <div class="ipt2">
                        <input type="text" id="yzmc" maxlength="6" placeholder="请输入验证码" />
                        <input class="yzm" name="yzm" type="button" value="点击获取验证码" onclick="sendMessage()" />
                        <!-- <button class="yzm" onclick="sendMessage()">获取验证码</button> -->
                    </div>
                </div>
                <!-- <div class="mima">
                    <div class="phone-name"><img src="util/image/zhanghao.png" alt=""></div>
                    <div class="ipt">
                        <input type="text" id="nickname" placeholder="请输入昵称" />
                    </div>
                </div> -->
                <!-- <div class="szd">
                    <span style="width: 0.6rem"><img src="util/image/birthday.png" alt=""></span>

                   <div style="color: #aab2bd;">请选择出生日期</div> -->
                <!-- <div style="width: 80%;"> -->
                <!-- <input class="Wdate" type="text" onClick="WdatePicker()" />
                        <input type="date" id="date" placeholder="请选择出生日期">
                        <select name="date" id="date" class="date" style="width: 80%">
                            <option value="请选择出生年份" selected="true">请选择出生年份</option>
                        </select>
                    </div>
                </div>  -->
                <!-- <div class="szd">
                    <span style="width: 0.6rem"><img src="util/image/sex.png" alt=""></span>
                    <div style="width: 80%">
                        <div class="sex">
                            <input id="man" type="radio" value="0" checked="checked" name="sex" /><span> 男</span>
                            <input id="woman" type="radio" name="sex" value="1" /> <span> 女</span>
                        </div>
                    </div>
                </div> -->
                <div class="mima">
                    <!-- <div class="phone-name"><img src="util/image/mima.png" alt=""></div> -->
                    <div class="ipt">
                        <input type="password" id="password" placeholder="请输入密码" />
                    </div>
                </div>
                <!-- <div class="szd">
                    <span style="width: 0.6rem"><img src="util/image/diqu.png" alt=""></span>
                    <div style="width: 80%">
                        <div data-toggle="distpicker">
                            <select class="province" data-province="省" style="width: 45%"></select>
                            <select class="city" data-city="市" style="width: 45%"></select>
                            <select class="district" data-district="区" style="width: 30%"></select>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="tjphone" style="visibility:hidden;">
                    <div class="tj-phone-name"><img src="util/image/shoujihao.png" alt=""></div>
                    <div class="ipt">
                        <input type="text" id="tjphone" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"
                            placeholder="推荐人手机号" />
                    </div>
                </div> -->
                <!-- <div class="xieyi">
                    <span>注册即代表同意</span>
                    <a href="/templates/accord.html">甄缘平台用户协议</a>
                </div> -->
                <!-- <button type="button" onclick="doSubmitForm()">提交</button> -->
                <div class="zhuces" onclick="zhuce()">
                    <img src="util/image/denglukaung.png" alt="">
                    <div class="zhuce">注册</div>
                </div>
                <div class="xiazais" id="xiazais" onclick="download()">
                    <img src="util/image/denglukaung.png" alt="">
                    <div class="xiazai" id="xiazai">下载</div>
                </div>

                <!-- </a
              > -->
                <!-- href="https://snjt.oss-cn-beijing.aliyuncs.com/%E5%95%86%E5%9F%8E%E7%AB%AF.apk" -->
                <!-- <div onclick="btn('18595714923')">跳转页面</div> -->
            </form>
        </div>
        <!-- <div class="btn"></div> -->
        <div class="wxtip" id="JweixinTip">
            <!-- <span class="wxtip-icon"></span> -->
            <p class="wxtip-txt">点击右上角<br />选择在浏览器中打开</p>
        </div>

        <div class="box1" id="box1">
            <!-- <div οnclick="close()" class="close">关闭</div> -->
            <div class="zhuces" onclick="android()" style="margin-top: .4rem;width: 70%;">
                <img src="util/image/denglukaung.png" alt="">
                <div class="zhuce " style="width:1.4rem">下载安卓系统版本</div>
            </div>
            <div class="xiazais" style="margin-top: .2rem;width: 70%;" onclick="ios()">
                <img src="util/image/denglukaung.png" alt="">
                <div class="xiazai" style="width:1rem" id="xiazai">下载IOS版本</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="util/jquery/jquery.main.js"></script>
    <script src="util/bootstrap/js/bootstrap.js"></script>
    <script src="util/jquery/dizhi/js/distpicker.data.js"></script>
    <script src="util/jquery/dizhi/js/distpicker.js"></script>
    <script src="util/jquery/dizhi/js/main.js"></script>
    <script>
        
               
        var _height = $("body").height();//获取当前bai窗口的高度duzhi
        var _width = $("body").width();//获取当前窗口的宽dao度
        var div1 = document.getElementById("box1");
        var isAndroid = true
        var androidUrl = ''
        var iosUrl = ''
        var downloadUrl = ''
        // console.log(_height, _width, '获取高宽'
        window.document.body.offsetHeight = window.screen.height

        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount; //当前剩余秒数
        console.log(count);

        //动态拼接 option
        var option = "";
        var myDate = new Date().getFullYear(); //获取完整的年份(4位,1970-????)
        for (let i = (myDate - 18); i >= (myDate - 65); i--) {
            $('.date').append('<option value="' + i + '">' + i + "年" + '</option>')
        }

        function download() {
            if (xiazaidddd) {

                // downloadBefore()
            }
            window.location.href = "http://api.chelonghui.cn/file/app/车龙惠.apk"
        }

        function downloadFinal() {
            if (xiazaidddd) {
                window.location.href = downloadUrl
            }
        }

        function change() {
            if (div1.style.display == 'block') div1.style.display = 'none';
            else div1.style.display = 'block';
        }

        function android() {
            downloadUrl = androidUrl
            change()
            downloadFinal()
        }

        function ios() {
            downloadUrl = iosUrl
            change()
            downloadFinal()
        }

        $(document).ready(function () {
            $(".city").val("");
            // $(".district").val("");
            $(".province").val("");
        });
        // var tjphone = document.getElementById("tjphone").value;

        $("#tjphone").val(array[1]);
        $("#tjphone").on("focus", function () {
            $(this).blur();
        });
        //   console.log(url, "ulrxxxxxxxxxxxxxxxxx");
        var phones = document.getElementById("phone").value;
        var code = document.getElementById("yzmc").value;
        // var date = document.getElementById("date").value;
        var passWord = document.getElementById("password").value;
        // var nickname = document.getElementById("nickname").value;
        // var sex = document.getElementsByName("sex").value;
        //   var registerProvince = document.getElementById()
        var flag = false;
        var xiazaidddd = false;

        function weixinTip(ele) {
            var ua = navigator.userAgent;
            var isWeixin = !!/MicroMessenger/i.test(ua);
            if (isWeixin) {


                console.log("11111111111111111111111111111111")
                ele.onclick = function (e) {
                    window.event
                        ? (window.event.returnValue = false)
                        : e.preventDefault();

                    document.getElementById("JweixinTip").style.display = "block";
                };

                document.getElementById("JweixinTip").onclick = function () {
                    this.style.display = "none";
                };
                xiazaidddd = false
            } else {
                xiazaidddd = true
            }
        }

        var btn1 = document.getElementById("xiazai"); //下载一
        weixinTip(btn1);

        function sendMessage() {
            var phones = document.getElementById("phone").value;
            // console.log(phones==='','phonesxxxxxxxxxxxx');
            if (phones !== '' && phones.length === 11 && /^1[23456789]\d{9}$/.test(phones) === true) {
                curCount = count;
                console.log(curCount);
                // console.log(phones.length,'phone的长度');
                // console.log(/^1[23456789]\d{9}$/.test(phones) === true,'这个怎么过来的');
                document.querySelector(".yzm").setAttribute("disabled", "true"); //设置按钮为禁用状态
                document.querySelector(".yzm").value = "请在" + curCount + "后再次获取"; //更改按钮文字
                InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
                // console.log("huoqu ");
                var phone = {};
                var phones = document.getElementById("phone").value;
                phone.phone = phones;
                phone.type = "1"
                var data4 = JSON.stringify(phone);
                console.log(phones, "phonesxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
                $.ajax({
                    type: "POST", // 用POST方式传输
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json", // 数据格式:JSON
                    url: "http://139.155.87.149:8766/app/auth/register/verify", // 目标地址
                    data: data4,
                    success: function (data) {
                        if (data.code === 0) {
                            alert("已发送");
                        } else {
                            window.clearInterval(InterValObj); // 停止计时器
                            document.querySelector(".yzm").removeAttribute("disabled"); //移除禁用状态改为可用
                            document.querySelector(".yzm").value = "发送验证码";
                            alert(data.msg);
                        }
                        // console.log(data, "请求成功");
                        // data = parseInt(data, 10);
                        // if (data == 1) {
                        //   $("#jbPhoneTip").html(
                        //     "<font color='#339933'>√ 短信验证码已发到您的手机,请查收</font>"
                        //   );
                        // } else if (data == 0) {
                        //   $("#jbPhoneTip").html(
                        //     "<font color='red'>× 短信验证码发送失败，请重新发送</font>"
                        //   );
                        // }
                    },
                });
            } else (
                alert("请正确输入手机号")
            )
        }

        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj); // 停止计时器
                document.querySelector(".yzm").removeAttribute("disabled"); //移除禁用状态改为可用
                document.querySelector(".yzm").value = "重新发送验证码";
            } else {
                curCount--;
                document.querySelector(".yzm").value =
                    "请在" + curCount + "秒后再次获取";
            }
        }

        // 判断验证
        function isRight() {
            //验证用户名是否为空
            var ph = false;
            var phones = document.getElementById("phone").value;
            if (phones == "" || phones == null) {
                alert("手机号不能为空！！");
                return (ph = false);
            } else {
                ph = true;
                //    console.log(ph,'ph');
            }
            // code验证码
            var co = false;
            var code = document.getElementById("yzmc").value;
            if (code == "" || code == null) {
                alert("验证码不能为空！！");
                return (co = false);
            } else {
                co = true;
            }
            //验证date
            // var pa = false;
            // var date = document.getElementById("date").value;
            // if (date == "" || date == null || date == "请选择出生年份") {
            //     alert("出生年份不能为空！！");
            //     return (pa = false);
            // } else {
            //     pa = true;
            // }
            //验证密码
            var pa = false;
            var passWord = document.getElementById("password").value;
            if (passWord == "" || passWord == null) {
                alert("密码不能为空！！");
                return (pa = false);
            } else {
                pa = true;
            }
            //验证昵称
            // var nn = false;
            // var nickname = document.getElementById("nickname").value;
            // if (nickname == "" || nickname == null) {
            //     alert("昵称不能为空！！");
            //     return (nn = false);
            // } else {
            //     nn = true;
            // }
            // var yq = false
            // var referPhone = document.getElementById("tjphone").value;
            // if (referPhone == "" || referPhone == null) {
            //   alert("邀请人不能为空！！");
            //   return yq = false;
            // }else{
            //     yq = true
            // }
            //
            // var dq = false;
            // var registerProvince = $(".province").val();
            // console.log(registerProvince);
            // var registerCity = $(".city").val();
            // // var registerArea = $(".district").val();    || registerArea === ""
            // if (registerProvince === "") {
            //     alert("请正确输入地区!!");
            //     return (dq = false);
            // } else {
            //     dq = true;
            // }
            // console.log(dq===true)
            // console.log(ph===true && vo===true && pa===true && yq===true);
            if (ph === true && co === true && pa === true) {
                flag = true;
                // console.log(flag, "flagxxx");
            } else {
                flag = false;
            }
            // console.log(flag,'flag');
            return flag;
        }

        function zhuce() {
            //   debugger
            //   console.log("xxx");
            isRight();
            // debugger
            if (flag) {
                var data = {
                    account: "",
                    code: "",
                    referPhone: "",
                    passWord: "",
                    nickname: "",
                    // registerArea: "",
                    registerCity: "",
                    registerProvince: "",
                    isValidate: true,
                    sex: '',
                    birthday: ''
                };
                var url = location.search.indexOf("?");
                var index = Number(url);
                var strings = location.search.substr(index + 1);
                var array = strings.split("phone=");
                data.referPhone = array[1];
                var phones = document.getElementById("phone").value;
                data.account = phones;
               
                var code = document.getElementById("yzmc").value;
                data.code = code;
                // console.log(data, "a1");
                // var date = document.getElementById("date").value;
                // data.birthday = date;
                var passWord = document.getElementById("password").value;
                data.passWord = passWord;
                // var nickname = document.getElementById("nickname").value;
                // data.nickname = nickname;
                // var sex = document.getElementsByName("sex");
                // for (var i = 0; i < sex.length; i++) {
                //     if (sex[i].checked) {
                //         data.sex = sex[i].value;
                //         break;
                //     }
                // }
                // var registerArea = $(".district").val();
                // data.registerArea = registerArea;
                // var registerProvince = $(".province").val();
                // data.registerProvince = registerProvince;
                // var registerCity = $(".city").val();
                // data.registerCity = registerCity;
                // var referPhone = document.getElementById("tjphone").value;
                // data.referPhone = referPhone;
                let data5 = JSON.stringify(data);

                logins(data5);

                // console.log("注册请求发送了",flag)
                // var phones = document.getElementById("phone").value;
                $("#phone").val("");
                $("#yzmc").val("");
                $("#password").val("");
                // $("#nickname").val("");
                // $("#tjphone").val("");
                // $(".city").val("");
                // // $(".district").val("");
                // $(".province").val("");
                flag = false;
            } else {
                // console.log("请从新发送",flag)
                // return
            }
            // console.log("xxx");
            // var pro = $(".province").val();
            // console.log(pro);
        }

        // 注册请求
        function logins(data5) {
            console.log(data5, 'data');
            $.ajax({
                type: "POST", // 用POST方式传输
                contentType: "application/json;charset=UTF-8",
                dataType: "json", // 数据格式:JSON
                url: "http://139.155.87.149:8766/app/auth/register", // 目标地址
                data: data5,
                success: function (data) {
                    if (data.code === 0) {
                        window.clearInterval(InterValObj); // 停止计时器
                        document.querySelector(".yzm").removeAttribute("disabled"); //移除禁用状态改为可用
                        document.querySelector(".yzm").value = "重新发送验证码";
                        alert("注册成功");
                        var xiazais = document.getElementById("xiazais")
                        xiazais.style.display = "block";

                    } else {
                        window.clearInterval(InterValObj); // 停止计时器
                        document.querySelector(".yzm").removeAttribute("disabled"); //移除禁用状态改为可用
                        document.querySelector(".yzm").value = "重新发送验证码";
                        alert(data.msg);
                    }
                },
            });
        }

        // 下载前请求
        function downloadBefore(data) {
            console.log(data, 'data');
            change()
            $.ajax({
                type: "GET", // 用POST方式传输
                contentType: "application/json;charset=UTF-8",
                dataType: "json", // 数据格式:JSON
                url: "https://api.xsyaq.com/app/dict/find", // 目标地址
                // data: data,
                success: function (data) {
                    if (data.code === 0) {
                        androidUrl = data.data.url
                        iosUrl = data.data.iosUrl
                        console.log(data, androidUrl, iosUrl);
                    } else {
                    }
                },
            });
        }

        function WdatePicker() {

        }


    </script>
</body>

</html>